<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
  //ES5写法 这种写法没有作用域的范围 对我们的需求来说是错误的
  //结果：控制台中只有低5个按钮被点击了
  // var btn = document.getElementsByTagName("button");
  // for (var i = 0; i < btn.length; i++) {
  //   btn[i].addEventListener("click",function () {
  //     console.log("第",i,"个按钮被点击了")
  //   })
  // }

  //ES6写法 这种写法包含了作用域的概念 对我们的需求来说是正确的
  var btn = document.getElementsByTagName("button");
  for (let i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click",function () {
      console.log("第",i,"个按钮被点击了")
    })
  }
</script>

</body>
</html>